<!-- returnAddress 退货地址 -->
<template>
  <div class="content">
    <div class="content-btn">
      <Cbutton @click="handleAdd">新建收发货地址</Cbutton>
    </div>
    <el-table :data="tableList" v-loading="tableLoading" ref="tableData" border fit>
      <el-table-column type="index" label="序号" align="center" width="70"></el-table-column>
      <el-table-column prop="shopName" label="商铺" align="center"></el-table-column>
      <el-table-column prop="name" label="联系人" align="center"></el-table-column>
      <el-table-column prop="phone" label="联系电话" align="center"></el-table-column>
      <el-table-column prop="area" label="地址" align="center" min-width="200">
        <template slot-scope="scope">{{scope.row.area + " " + scope.row.detailAddress}}</template>
      </el-table-column>
      <el-table-column prop="roleName" label="地址类型" align="center" min-width="120">
        <template slot-scope="scope">
          <div>
            默认收货地址：<el-switch v-model="scope.row.receiveStatusSwitch" @change="handleSetDefultReceiveStatus(scope.row)"></el-switch>
          </div>
          <div>
            默认发货地址：<el-switch v-model="scope.row.sendStatusSwitch" @change="handleSetDefultSend(scope.row)"></el-switch>
          </div>
          <!-- <span style="color: rgb(24, 144, 255);" v-if="scope.row.receiveStatus === 1">默认地址</span> -->
          <!-- <span v-else class="click-ele info" @click="handleSetDefultAdd(scope.row)">设为默认</span> -->
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" min-width="120" align="center">
        <template slot-scope="scope">
          <Cbutton type="text" @click="handleEdit(scope.row)">编辑</Cbutton>
          <Cbutton type="text" color="danger" @click="handleRemove(scope.row)">删除</Cbutton>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新建退货地址 修改退货地址 -->
    <el-dialog :title="dialog.title + '收发货地址'" :visible.sync="dialog.mVisible" v-if="dialog.mVisible" width="500px"
               class="dialog-form">
      <el-form :model="dialog.data" :rules="dialog.rules" ref="DlalogForm" size="medium" label-width="120px">
        <el-form-item label="收货人：" prop="name">
          <el-input v-model="dialog.data.name" placeholder="请输入收货人"></el-input>
        </el-form-item>
        <el-form-item label="联系电话：" prop="phone">
          <el-input v-model="dialog.data.phone" placeholder="请输入联系电话"></el-input>
        </el-form-item>
        <el-form-item label="邮政编码：" prop="postCode">
          <el-input v-model="dialog.data.postCode" placeholder="请输入邮政编码"></el-input>
        </el-form-item>
        <el-form-item label="省市区：" prop="roleId">
          <AreaCascader @getArea="getAreaCas" :defalutValue="dialog.data.areaList"></AreaCascader>
        </el-form-item>

        <el-form-item label="详细地址：" prop="detailAddress">
          <el-input type="textarea" v-model="dialog.data.detailAddress" placeholder="请输入详细地址"></el-input>
        </el-form-item>
        <el-form-item label="默认收货地址：" prop="receiveStatus">
          <el-radio-group v-model="dialog.data.receiveStatus">
            <el-radio :label="'1'">是</el-radio>
            <el-radio :label="'0'">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="默认发货地址：" prop="sendStatus">
          <el-radio-group v-model="dialog.data.sendStatus">
            <el-radio :label="'1'">是</el-radio>
            <el-radio :label="'0'">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialog.mVisible = false">取 消</el-button>
        <el-button size="medium" :loading="dialog.loading" type="primary" @click="handleDiaSub('DlalogForm')">确
          定</el-button>
      </span>
    </el-dialog>
    <!-- 新建退货地址 修改退货地址 -->

  </div>
</template>

<script>
import { GetReturnAddressList, AddReturnAddress, EditReturnAddress, SetDetultReceiveAddress, SetDetultSendAddress, RemoveAddress } from '@/api/onlineMan'
import AreaCascader from '@/components/Area'
import { returnAddressRules } from '@/utils/rules'
export default {
  name: 'returnAddress',
  components: { AreaCascader },
  data () {
    return {
      tableList: [],
      tableLoading: false,
      dialog: {
        title: '',
        mVisible: false,
        loading: false,
        oprType: 'ADD',
        data: {
          adminId: '15',
          addressName: '', // 地址名称
          name: '', // 收发货人姓名
          phone: '', // 收货人电话
          postCode: '', // 邮政编码
          province: '', // 省/ 直辖市
          city: '', // 市
          region: '', // 区
          street: '', // 街道
          area: '', // 省/ 市 / 区 / 街道
          areaList: [],
          detailAddress: '', // 详细地址
          receiveStatus: '0', // 是否默认收货地址：0-> 否；1-> 是,
          sendStatus: '0' // 默认发货地址：0-> 否；1-> 是,
        },
        rules: returnAddressRules
      }
    }
  },
  props: {},
  watch: {},
  computed: {},
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      this.tableLoading = true
      GetReturnAddressList().then(res => {
        res.data.forEach(e => {
          e.receiveStatusSwitch = e.receiveStatus === 1
          e.sendStatusSwitch = e.sendStatus === 1
        })
        this.tableList = res.data
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    handleEdit (row) {
      this.dialog.title = '修改'
      this.dialog.mVisible = true
      this.dialog.oprType = 'EDIT'
      this.dialog.data.id = row.id
      for (const key in this.dialog.data) {
        if (key === 'receiveStatus' || key === 'sendStatus') {
          this.dialog.data[key] = row[key].toString()
        } else {
          this.dialog.data[key] = row[key]
        }
      }
      this.dialog.data.areaList = row.province + ',' + row.city + ',' + row.region
    },
    handleAdd () {
      this.dialog.title = '创建'
      this.dialog.mVisible = true
      this.dialog.oprType = 'ADD'
      for (const key in this.dialog.data) {
        this.dialog.data[key] = ''
      }
      if (this.dialog.data.id) {
        delete this.dialog.data.id
      }
      this.dialog.data.areaList = []
      this.dialog.data.receiveStatus = '0'
      this.dialog.data.adminId = '15'
    },
    handleDiaSub (formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) return false
        this.dialog.loading = true
        if (this.dialog.oprType === 'ADD') {
          const parmas = JSON.parse(JSON.stringify(this.dialog.data))
          AddReturnAddress(parmas).then(res => {
            this.$message.success(res.message || '操作成功')
            this.getList()
            this.dialog.loading = false
            this.dialog.mVisible = false
          }).catch(() => {
            this.dialog.loading = false
          })
        }
        if (this.dialog.oprType === 'EDIT') {
          const parmas = JSON.parse(JSON.stringify(this.dialog.data))
          EditReturnAddress(parmas).then(res => {
            this.$message.success(res.message || '操作成功')
            this.getList()
            this.dialog.loading = false
            this.dialog.mVisible = false
          }).catch(() => {
            this.dialog.loading = false
          })
        }
      })
    },
    handleSetDefultReceiveStatus (row) {
      const params = {
        id: row.id,
        receiveStatus: row.receiveStatusSwitch ? 1 : '0'
      }
      SetDetultReceiveAddress(params).then(res => {
        this.getList()
      })
    },
    handleSetDefultSend (row) {
      const params = {
        id: row.id,
        receiveStatus: row.sendStatusSwitch ? 1 : '0'
      }
      SetDetultSendAddress(params).then(res => {
        this.getList()
      })
    },
    handleRemove (row) {
      this.$confirm(`确定要删除该地址吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        RemoveAddress({ ids: [row.id] }).then(res => {
          this.getList()
          this.$message.success(res.message || '操作成功')
        }).catch(() => { })
      }).catch(() => { })
    },

    getAreaCas (val) {
      this.dialog.data.province = val.province
      this.dialog.data.city = val.city
      this.dialog.data.region = val.region
      this.dialog.data.area = val.area
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
